<template>
  <el-dialog
    :title="isEdit ? '编辑狗狗品种' : '添加新品种'"
    :visible.sync="dialogVisible"
    width="80%"
    @close="handleClose"
  >
    <el-form
      :model="dogForm"
      :rules="rules"
      ref="dogForm"
      label-width="120px"
      class="dog-form"
    >
      <el-row :gutter="20">
        <!-- 基本信息 -->
        <el-col :span="12">
          <h3>基本信息</h3>
          <el-form-item label="品种名称" prop="breed">
            <el-input v-model="dogForm.breed" placeholder="请输入品种名称"></el-input>
          </el-form-item>
          
          <el-form-item label="英文名称" prop="breed_en">
            <el-input v-model="dogForm.breed_en" placeholder="请输入英文名称"></el-input>
          </el-form-item>
          
          <el-form-item label="原产国" prop="origin_country">
            <el-input v-model="dogForm.origin_country" placeholder="请输入原产国"></el-input>
          </el-form-item>
          
          <el-form-item label="分布区域" prop="distribution_area">
            <el-input v-model="dogForm.distribution_area" placeholder="请输入分布区域"></el-input>
          </el-form-item>
          
          <el-form-item label="犬种分组" prop="group_type">
            <el-select v-model="dogForm.group_type" placeholder="请选择犬种分组">
              <el-option label="运动犬组" value="运动犬组"></el-option>
              <el-option label="牧羊犬组" value="牧羊犬组"></el-option>
              <el-option label="非运动犬组" value="非运动犬组"></el-option>
              <el-option label="工作犬组" value="工作犬组"></el-option>
              <el-option label="猎犬组" value="猎犬组"></el-option>
              <el-option label="玩具犬组" value="玩具犬组"></el-option>
              <el-option label="梗犬组" value="梗犬组"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        
        <!-- 体型信息 -->
        <el-col :span="12">
          <h3>体型信息</h3>
          <el-form-item label="体重范围(kg)">
            <el-row :gutter="10">
              <el-col :span="12">
                <el-input-number v-model="dogForm.weight_min" :min="0" :max="100" :precision="1" placeholder="最小"></el-input-number>
              </el-col>
              <el-col :span="12">
                <el-input-number v-model="dogForm.weight_max" :min="0" :max="100" :precision="1" placeholder="最大"></el-input-number>
              </el-col>
            </el-row>
          </el-form-item>
          
          <el-form-item label="身高范围(cm)">
            <el-row :gutter="10">
              <el-col :span="12">
                <el-input-number v-model="dogForm.height_min" :min="0" :max="100" :precision="1" placeholder="最小"></el-input-number>
              </el-col>
              <el-col :span="12">
                <el-input-number v-model="dogForm.height_max" :min="0" :max="100" :precision="1" placeholder="最大"></el-input-number>
              </el-col>
            </el-row>
          </el-form-item>
          
          <el-form-item label="寿命" prop="life_span">
            <el-input v-model="dogForm.life_span" placeholder="例如：10-12年"></el-input>
          </el-form-item>
          
          <el-form-item label="价格范围" prop="price_range">
            <el-input v-model="dogForm.price_range" placeholder="例如：3000-8000元"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      
      <!-- 姿态图片 -->
      <el-row>
        <el-col :span="24">
          <h3>姿态图片</h3>
          <el-row :gutter="20">
            <el-col :span="6" v-for="(image, index) in ['image1', 'image2', 'image3', 'image4']" :key="index">
              <el-form-item :label="`图片${index + 1}`">
                <el-upload
                  class="image-uploader"
                  action="#"
                  :show-file-list="false"
                  :before-upload="beforeImageUpload"
                  :on-success="(response, file) => handleImageSuccess(response, file, image)"
                >
                  <img v-if="dogForm[image]" :src="dogForm[image]" class="uploaded-image">
                  <i v-else class="el-icon-plus image-uploader-icon"></i>
                </el-upload>
                <el-input v-model="dogForm[image]" placeholder="或输入图片URL" style="margin-top: 10px;"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      
      <!-- 毛发信息 -->
      <el-row :gutter="20">
        <el-col :span="12">
          <h3>毛发信息</h3>
          <el-form-item label="毛发类型" prop="coat_type">
            <el-input v-model="dogForm.coat_type" placeholder="例如：双层毛，中长毛"></el-input>
          </el-form-item>
          
          <el-form-item label="毛色" prop="coat_color">
            <el-input v-model="dogForm.coat_color" placeholder="例如：金色、奶油色"></el-input>
          </el-form-item>
        </el-col>
        
        <!-- 评分信息 -->
        <el-col :span="12">
          <h3>评分信息</h3>
          <el-form-item label="好养度">
            <el-rate v-model="dogForm.care_difficulty" show-text :texts="['很难养', '较难养', '一般', '比较好养', '非常好养']"></el-rate>
          </el-form-item>
          
          <el-form-item label="运动需求">
            <el-rate v-model="dogForm.exercise_needs" show-text :texts="['很少', '较少', '一般', '较多', '很多']"></el-rate>
          </el-form-item>
          
          <el-form-item label="美容需求">
            <el-rate v-model="dogForm.grooming_needs" show-text :texts="['很少', '较少', '一般', '较多', '很多']"></el-rate>
          </el-form-item>
          
          <el-form-item label="训练难度">
            <el-rate v-model="dogForm.training_difficulty" show-text :texts="['很容易', '较容易', '一般', '较难', '很难']"></el-rate>
          </el-form-item>
          
          <el-form-item label="吠叫程度">
            <el-rate v-model="dogForm.barking_level" show-text :texts="['很少', '较少', '一般', '较多', '很多']"></el-rate>
          </el-form-item>
        </el-col>
      </el-row>
      
      <!-- 适应性 -->
      <el-row :gutter="20">
        <el-col :span="24">
          <h3>适应性</h3>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="适合儿童">
                <el-switch v-model="dogForm.good_with_children" :active-value="1" :inactive-value="0"></el-switch>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="适合其他宠物">
                <el-switch v-model="dogForm.good_with_pets" :active-value="1" :inactive-value="0"></el-switch>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="适合公寓">
                <el-switch v-model="dogForm.apartment_friendly" :active-value="1" :inactive-value="0"></el-switch>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      
      <!-- 详细描述 -->
      <el-row>
        <el-col :span="24">
          <h3>详细描述</h3>
          <el-form-item label="性格特征" prop="temperament">
            <el-input v-model="dogForm.temperament" placeholder="例如：友善、可靠、值得信赖"></el-input>
          </el-form-item>
          
          <el-form-item label="特点描述" prop="characteristics">
            <el-input type="textarea" :rows="3" v-model="dogForm.characteristics" placeholder="请描述该品种的主要特点"></el-input>
          </el-form-item>
          
          <el-form-item label="习性描述" prop="habits">
            <el-input type="textarea" :rows="3" v-model="dogForm.habits" placeholder="请描述该品种的生活习性"></el-input>
          </el-form-item>
          
          <el-form-item label="健康问题" prop="health_issues">
            <el-input type="textarea" :rows="2" v-model="dogForm.health_issues" placeholder="请描述常见的健康问题"></el-input>
          </el-form-item>
          
          <el-form-item label="特殊注意事项" prop="special_notes">
            <el-input type="textarea" :rows="2" v-model="dogForm.special_notes" placeholder="请描述特殊注意事项"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="handleSubmit" :loading="submitting">{{ isEdit ? '更新' : '添加' }}</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'DogForm',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    dogData: {
      type: Object,
      default: () => ({})
    },
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      dialogVisible: false,
      submitting: false,
      dogForm: {
        breed: '',
        breed_en: '',
        image1: '',
        image2: '',
        image3: '',
        image4: '',
        distribution_area: '',
        weight_min: null,
        weight_max: null,
        height_min: null,
        height_max: null,
        habits: '',
        care_difficulty: 3,
        characteristics: '',
        temperament: '',
        life_span: '',
        origin_country: '',
        group_type: '',
        coat_type: '',
        coat_color: '',
        exercise_needs: 3,
        grooming_needs: 3,
        training_difficulty: 3,
        good_with_children: 1,
        good_with_pets: 1,
        apartment_friendly: 1,
        barking_level: 3,
        health_issues: '',
        special_notes: '',
        price_range: ''
      },
      rules: {
        breed: [
          { required: true, message: '请输入品种名称', trigger: 'blur' }
        ],
        breed_en: [
          { required: true, message: '请输入英文名称', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    visible(val) {
      this.dialogVisible = val
      if (val && this.isEdit) {
        this.dogForm = { ...this.dogData }
      } else if (val) {
        this.resetForm()
      }
    }
  },
  methods: {
    resetForm() {
      this.dogForm = {
        breed: '',
        breed_en: '',
        image1: '',
        image2: '',
        image3: '',
        image4: '',
        distribution_area: '',
        weight_min: null,
        weight_max: null,
        height_min: null,
        height_max: null,
        habits: '',
        care_difficulty: 3,
        characteristics: '',
        temperament: '',
        life_span: '',
        origin_country: '',
        group_type: '',
        coat_type: '',
        coat_color: '',
        exercise_needs: 3,
        grooming_needs: 3,
        training_difficulty: 3,
        good_with_children: 1,
        good_with_pets: 1,
        apartment_friendly: 1,
        barking_level: 3,
        health_issues: '',
        special_notes: '',
        price_range: ''
      }
    },
    handleClose() {
      this.dialogVisible = false
      this.$emit('update:visible', false)
      this.$refs.dogForm.resetFields()
    },
    handleSubmit() {
      this.$refs.dogForm.validate((valid) => {
        if (valid) {
          this.submitting = true
          // 模拟API调用
          setTimeout(() => {
            this.submitting = false
            this.$message.success(this.isEdit ? '更新成功' : '添加成功')
            this.$emit('submit', this.dogForm)
            this.handleClose()
          }, 1000)
        }
      })
    },
    beforeImageUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传图片只能是 JPG/PNG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    handleImageSuccess(response, file, imageField) {
      // 这里应该处理图片上传成功后的逻辑
      // 暂时使用本地预览
      this.dogForm[imageField] = URL.createObjectURL(file.raw)
    }
  }
}
</script>

<style scoped>
.dog-form h3 {
  color: #409EFF;
  border-bottom: 2px solid #409EFF;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

.image-uploader {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-uploader:hover {
  border-color: #409EFF;
}

.image-uploader-icon {
  font-size: 28px;
  color: #8c939d;
}

.uploaded-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dialog-footer {
  text-align: right;
}
</style>
